<script setup>

import {computed, onMounted, ref} from "vue";
import axios from "axios";
import router from "@/router/index.js";
import Router from "@/router/index.js";
import {useUserStore} from "@/stores/UserStore.js";

const phone = ref("");
const phoneKey = ref("手机号")
const password = ref("")
const back = ref(false)
const terms = ref(false)
const next = ref("发送验证码")
const tips = ref("")
const box = ref();

const userStore = useUserStore()

function login() {
  terms.value = false
  tips.value = ""
  const code = ref()
  if (back && password.value) {
    axios.get("http://localhost:8081/user/login", {
          params: {
            phone: phone.value,
            Code: password.value,
            password: "0123456789",
            msg: true
          }
        }
    ).then(res => {
      userStore.login(res.data)
      Router.push({name: 'plCenter'})
    })
    return;
  }

  if (!box.value) {
    terms.value = true
    tips.value = "请同意下方协议"
    return;
  }


  if (phone.value.length === 11) {
    code.value = axios.get("http://localhost:8081/user/code").then((res) => {
      next.value = "登录"
      password.value = res.data
      back.value = true
    })

  } else {
    terms.value = true
    tips.value = "请输入正确的手机号"
  }
}

function backLogin() {
  back.value = false
  next.value = '下一步'
}
</script>

<template>
  <div class = "loginTitle"><p>登录</p>
    <span>欢迎来到小黑盒</span>
  </div>
  <div class = "error" v-if = "terms">
    {{ tips }}
  </div>
  <div class = "back" v-if = "back" @click = "backLogin">返回上一步</div>
  <div class = "back" v-if = "!back" @click = "router.push({name:'login'})">密码登录</div>

  <div class = "loginBox border">
    <input v-if = "!back" type = "text" v-model = "phone" :placeholder = "phoneKey" class = "p-2">
    <input v-if = "back" type = "text" v-model = "password" :placeholder = "phoneKey" class = "p-2">
  </div>
  <div class = "border btn p-2" @click = "login">{{ next }}</div>
  <div class = "logo border">
    <div class = "gz">
      <svg t = "1739340738133" class = "icon" viewBox = "0 0 1024 1024" version = "1.1"
           xmlns = "http://www.w3.org/2000/svg" p-id = "5298" width = "32" height = "32">
        <path
            d = "M901.12 268.288c9.216 5.12 16.384 17.408 16.384 27.648v430.08c0 10.24-7.168 22.528-16.384 27.648L771.072 829.44c-9.216 5.12-16.384 1.024-16.384-9.216V399.36c0-10.24-7.168-22.528-16.384-27.648L608.256 296.96c-9.216-5.12-16.384-1.024-16.384 9.216v106.496c0 10.24-8.192 18.432-18.432 18.432H449.536c-10.24 0-18.432-8.192-18.432-18.432V16.384c0-10.24 7.168-14.336 16.384-9.216L901.12 268.288zM431.104 611.328c0-10.24 8.192-18.432 18.432-18.432h124.928c10.24 0 18.432 8.192 18.432 18.432v396.288c0 10.24-7.168 14.336-16.384 9.216L122.88 754.688c-9.216-5.12-16.384-17.408-16.384-27.648V296.96c0-10.24 7.168-22.528 16.384-27.648L252.928 194.56c9.216-5.12 16.384-1.024 16.384 9.216V624.64c0 10.24 7.168 22.528 16.384 27.648L414.72 727.04c9.216 5.12 16.384 1.024 16.384-9.216V611.328z"
            p-id = "5299"></path>
      </svg>
      小黑盒
    </div>
    <span>致力于打造一流的游戏社交平台</span>
    <p><input type = "checkbox" v-model = "box" id = "ok"><label
        for = "ok">已阅读并同意《<span>小黑盒服务以及隐私条款</span>》</label>
    </p>
  </div>
</template>

<style scoped>
* {
  position: relative;
}

.loginBox {
  top: 40%;
  height: 40px;
}

.back {
  position: absolute;
  top: 34%;
  font-size: 14px;
  cursor: pointer;
}

.error {
  position: absolute;
  top: 50%;
  text-align: center;
}

.loginBox input {
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
  background: none;
}

.loginBox input:focus {
  border-bottom: 1px solid black;
}

.btn {
  top: 41%;
  width: 100%;
  color: white;
  background-color: rgba(0, 0, 0, 0.8);
}

.logo {
  top: 80%;
  text-align: center;
}

.gz {
  width: 128px;
  margin: auto;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.loginTitle {
  font-size: 34px;
  position: absolute;
  top: 24%;
}

.loginTitle p {
  margin: 0;
  padding: 0;
}

.loginTitle span {
  font-size: 14px;
}
</style>